<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo" />
      <ListItem
        :todos="todos"
        :updateTodo="updateTodo"
        :deleteTodo="deleteTodo"
        v-show="!!todos.length"
      />
      <Footer
        :todos="todos"
        :updateTodos="updateTodos"
        :deleteTodos="deleteTodos"
        :isDoneCount="isDoneCount"
        :totalCount="totalCount"
        v-show="!!todos.length"
      />
      <h1 :style="{ color: 'red' }" v-show="!todos.length">
        {{ msg }}
      </h1>
    </div>
  </div>
</template>

<script>
import Header from './views/Header'
import ListItem from './views/ListItem'
import Footer from './views/Footer'
import {
  getTodos,
  addTodo,
  updateTodo,
  updateTodos,
  deleteTodo,
  deleteTodos,
} from './api/todos'
import { toJson, toJsonStringify } from './utils/convert'
export default {
  name: 'App',
  data() {
    return {
      todos: [],
      msg: '',
    }
  },
  mounted() {
    this.getTodos()
  },
  computed: {
    isDoneCount() {
      return this.todos.reduce((prev, todo) => {
        return prev + (todo.isDone ? 1 : 0)
      }, 0)
    },
    totalCount() {
      return this.todos.length
    },
  },
  methods: {
    async getTodos() {
      const res = await getTodos()
      this.todos = toJson(res.data)
      if (!this.todos.length) {
        this.msg = '恭喜您,已完成全部任务'
      }
    },
    async addTodo(name) {
      const res = await addTodo(name)
      this.todos = toJson(res.data)
    },
    async updateTodo(id, isDone) {
      const res = await updateTodo(id, isDone)
      this.todos = toJson(res.data)
    },
    async deleteTodo(id) {
      const res = await deleteTodo(id)
      this.todos = toJson(res.data)
      if (!this.todos.length) {
        this.msg = '恭喜您,已完成全部任务'
      }
    },
    async updateTodos(isDone) {
      const ids = this.todos.reduce((prev, todo) => {
        if (todo.isDone !== isDone) {
          prev.push(todo._id)
        }
        return prev
      }, [])
      const res = await updateTodos(toJsonStringify(ids), isDone)
      this.todos = toJson(res.data)
    },
    async deleteTodos() {
      const ids = this.todos.reduce((prev, todo) => {
        if (todo.isDone) {
          prev.push(todo._id)
        }
        return prev
      }, [])
      const res = await deleteTodos(toJsonStringify(ids))
      this.todos = toJson(res.data)
      if (!this.todos.length) {
        this.msg = '恭喜您,已完成全部任务'
      }
    },
  },
  components: {
    Header,
    ListItem,
    Footer,
  },
}
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
